<template>
    <div>
        <el-dialog title="添加入库单" :visible.sync="disable" :before-close="conmel" width="800px">
            <div class="botcenten">
                <div>
                    <el-form label-position='right' ref="form" :model="form" :rules="rules" :inline="true"
                        class="demo-form-inline">
                        <el-form-item label="耗材入库主题:" label-width="200px" prop="storeName">
                            <el-input placeholder="请输入耗材入库主题" v-model="form.storeName"></el-input>
                        </el-form-item>
                        <el-form-item label="入库来源:" label-width="200px" prop="storeSource">
                            <el-select class="handle-select" v-model="form.storeSource" placeholder="请选择入库来源">
                                <el-option v-for="item in proSourcelist" :key="item.id" :label="item.proSource"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="入库仓库:" label-width="200px" prop="repositoryId">
                            <el-select class="handle-select" v-model="form.repositoryId" placeholder="请选择入库仓库">
                                <el-option v-for="item in repositorylist" :key="item.id" :label="item.repositoryName"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="入库备注:" label-width="200px" prop="remark">
                            <el-input placeholder="请输入入库备注" v-model="form.remark"></el-input>
                        </el-form-item>
                        <el-form-item label="耗材导入:" label-width="200px" class="is-required">
                            <div class="upload-excel">
                                <!-- 上传文件的input框，但是不能让用户看见 -->
                                <input ref="inputName" class="excel-upload-input" type="file" accept=".xls, .xlsx"
                                    @change="selectedFile" />

                                <div class="drop" @dragover.prevent="allowDrop" @drop.prevent="handleDrop">
                                    <i class="el-icon-upload" />
                                    <el-link type="primary" href="http://192.168.2.144:81/model/consum.xlsx"
                                        target="_blank" :underline="false">下载导入模板</el-link>
                                    <div v-if="uploadedFile">
                                        <p>已上传的文件：{{ uploadedFile.name }}
                                        </p>
                                        <p>文件大小：{{ fileSizeInMB }} MB <span class="el-icon-delete"
                                                @click="delfile"></span></p>
                                        <!-- 其他文件相关信息展示 -->
                                    </div>
                                    <span v-else>
                                        将文件拖到此处或
                                        <el-button type="text" @click="selectFile">点击上传</el-button>
                                    </span>
                                </div>
                            </div>
                        </el-form-item>
                    </el-form>
                    <!-- 上传文件的input框，但是不能让用户看见 -->
                    <!-- <input ref="inputName" class="excel-upload-input" type="file" accept=".xls, .xlsx"
                        @change="selectedFile" /> -->
                </div>

            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="conmel">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
import { proSource, repository, consumaddexcel } from '../../../../api/index'
export default {
    name: "in-add",
    props: {
        disable: {
            type: Boolean,
            required: true
        }
    },
    watch: {

    },
    components: {
    },
    data() {
        return {
            form: {
                storeName: '',
                storeSource: '',
                repositoryId: '',
                remark: '',
            },
            repositorylist: [],
            proSourcelist: [],
            formData: null,
            uploadedFile: null, // 用户上传的文件信息
            rules: {
                storeName: [
                    { required: true, message: '耗材入库主题不能为空', trigger: 'blur' },
                ],
                storeSource: [
                    { required: true, message: '入库来源不能为空', trigger: 'change' },
                ],
                repositoryId: [
                    { required: true, message: '入库仓库不能为空', trigger: 'change' },
                ],
                remark: [
                    { required: true, message: '入库备注不能为空', trigger: 'blur' },
                ]
            }
        }
    },
    created() {

    },
    mounted() {

    },
    computed: {
        fileSizeInMB() {
            if (this.uploadedFile) {
                return (this.uploadedFile.size / (1024 * 1024)).toFixed(2); // 将字节转换为 MB 并保留两位小数
            }
            return 0; // 如果没有上传文件，则默认显示 0 MB
        }
    },
    methods: {
        submit() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    if (this.formData) {
                        const loading = this.$loading({
                            lock: true,
                            text: '正在上传文件,请稍后',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        this.formData.append('storeName', this.form.storeName)
                        this.formData.append('repositoryId', this.form.repositoryId)
                        this.formData.append('storeSource', this.form.storeSource)
                        this.formData.append('remark', this.form.remark)
                        consumaddexcel(this.formData).then(res => {
                            loading.close();
                            if (res.data.data) {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功',
                                });
                                this.$emit('refresh')
                                this.form = {}
                                this.conmel()
                                this.$refs.inputName.value = null
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '添加失败,请检查文件格式',
                                });
                                this.$refs.inputName.value = null
                            }

                        })


                    } else {
                        this.$message({
                            type: 'error',
                            message: '上传文件不能为空',
                        });
                    }


                } else {
                    return false;
                }
            });

        },
        open() {
            this.proSources()
            this.repositorys()
        },
        async proSources() {
            const data = await proSource()
            this.proSourcelist = data.data.data
        },
        //仓库
        async repositorys() {
            const data = await repository()
            this.repositorylist = data.data.data

        },
        delfile() {
            this.formData = null
            this.uploadedFile = null // 用户上传的文件信息
            this.$refs.inputName.value = null
        },
        conmel() {
            // 清空表单
            this.$refs.form.resetFields();
            this.formData = null
            this.uploadedFile = null // 用户上传的文件信息
            this.$emit('close')
            this.$refs.inputName.value = null
        },
        importsub() {
            this.$refs.inputName.click()
        },
        selectFile() {
            this.$refs.inputName.click()
        },
        // 处理点击上传事件
        selectedFile(e) {
            // console.log(e);
            const file = e.target.files[0]
            this.uploadedFile = file;
            this.formData = new FormData()
            this.formData.append('file', file)
            // console.log(this.formData);
        },
        // 允许拖放
        allowDrop(event) {
            event.preventDefault();
        },
        // 处理拖放事件
        handleDrop(event) {
            event.preventDefault();
            const fileTypes = ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'];
            if (!event.dataTransfer.types || !event.dataTransfer.files || event.dataTransfer.files.length === 0 || !fileTypes.includes(event.dataTransfer.files[0].type)) {
                // 不符合要求的文件类型，进行相应处理，例如显示提示信息或者阻止拖放
                // this.$message.success('不支持的文件类型!')
                this.$message({
                    showClose: true,
                    message: '不支持的文件类型',
                    type: 'warning'
                });

            } else {
                const file = event.dataTransfer.files[0];
                this.uploadedFile = file;
                this.formData = new FormData();
                this.formData.append('file', file);
                this.form.file = this.formData.get('file')


            }
        },

    }

}
</script>


<style lang="less" scoped>
.el-icon-delete {
    color: rgb(255, 81, 0);
}

::v-deep .el-input {
    width: 200px;
}

::v-deep .el-textarea {
    width: 500px;
}

::v-deep .el-upload {
    height: auto;
    width: auto;
    border: 0;
    border-radius: 4px;
}

.upload-excel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 20px;
    width: 360px;
    height: 180px;
    align-items: center;
    color: #697086;
}

.btn-upload,
.drop {
    border: 1px dashed #dcdfe6;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 160px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.drop {
    line-height: 40px;
    color: #bbb;


}

i {
    font-size: 60px;
    display: block;
    color: #c0c4cc;
}

.excel-upload-input {

    display: none;
    /* background-color: #697086; */
    z-index: -9999;
}

.buttoncenter {
    margin-bottom: 10px;
    float: right;
}
</style>